<template>
  <view class="main">
    <u-navbar title="生产统计" :title-bold="true" title-color="#000"></u-navbar>
    <searchcom @searchList="searchList"></searchcom>
    <view class="year-box">
      <u-input v-model="year" type="select" :select-open="yearShow" @click="yearShow = true"
        class="mine-input yearInput" />
      <u-picker mode="time" v-model="yearShow" :params="yearParams" @confirm="yearConfirm"></u-picker>
    </view>
    <scroll-view :scroll-y="true" class="u-flex-1 of-hide">
      <view class="u-p-20">
        <view class="flex mine-detail margintb" @click="toInfo">
          <view class="title-card"> 电煤供应 </view>
          <!-- <u-icon name="arrow-right"></u-icon> -->
        </view>
        <view class="successNum flex mine-detail">
          <view class="success-year" style="background-color: #ecfff9;">
            <view><text class="successC">{{ electricityPlanVo.electricityCoalPlan }}</text><text
                class="grayColor">万吨</text></view>
            <view class="margin-all">年计划</view>
          </view>
          <view class="success-year" style="background-color: #f4f7ff;">
            <view><text class="primC">{{ electricityPlanVo.electricityCoalComplete }}</text><text
                class="grayColor">万吨</text></view>
            <view class="margin-all">年完成</view>
          </view>
        </view>
        <view class="flex mine-detail margintb" @click="toInfo">
          <view class="title-card"> 采掘工作面 </view>
          <!-- <u-icon name="arrow-right"></u-icon> -->
        </view>
        <view class="flex mine-detail" style="height: 226rpx;">

          <view class="work" style="background-color: #dde9fe;">
            <view class="margin-all fontw">采面</view>
            <view class="work-year">
              <view><text class="successC">{{ engineeringVo.cmNormalCount }}</text></view>
              <view class="margin-all">正常生产</view>
            </view>
            <view class="work-year">
              <view><text class="successC">{{ engineeringVo.cmCompleteCount }}</text></view>
              <view class="margin-all">当月完工</view>
            </view>
          </view>
          <view class="work" style="background-color: #e6f9fe;">
            <view class="margin-all fontw">掘进</view>
            <view class="work-year">
              <view><text class="successC">{{ engineeringVo.jjNormalCount }}</text></view>
              <view class="margin-all">正常掘进</view>
            </view>
            <view class="work-year">
              <view><text class="successC">{{ engineeringVo.jjCompleteCount }}</text></view>
              <view class="margin-all">当月完工</view>
            </view>
          </view>
        </view>
        <view class="flex mine-detail margintb" @click="toInfo">
          <view class="title-card"> 生产情况 </view>
          <!-- <u-icon name="arrow-right"></u-icon> -->
        </view>
        <u-tabs :list="list" :is-scroll="true" :current="current" bar-width="50" active-color="#5774ff" @change="change">
        </u-tabs>
        <view>
          <view class="mine-grid">
            <view class="margin-all">原煤生产</view>
            <u-grid :col="2">
              <u-grid-item>
                <view class="margintb">
                  <text class="primC">{{ psList.coalYearPlan }}</text>
                  <text class="grayColor"> 万吨</text>
                </view>
                <view class="grid-text">年计划</view>
              </u-grid-item>
              <u-grid-item>
                <view class="margintb">
                  <text class="primC">{{ psList.coalMonthPlan }}</text>
                  <text class="grayColor"> 万吨</text>
                </view>
                <view class="grid-text">月计划</view>
              </u-grid-item>
            </u-grid>
            <u-grid :col="2">
              <u-grid-item>
                <view class="margintb">
                  <text class="errorC">{{ psList.coalYearComplete }}</text>
                  <text class="grayColor"> 万吨</text>
                </view>
                <view class="grid-text">年累计完成</view>
              </u-grid-item>
              <u-grid-item>
                <view class="margintb">
                  <text class="errorC">{{ psList.coalMonthComplete }}</text>
                  <text class="grayColor"> 万吨</text>
                </view>
                <view class="grid-text">月累计完成</view>
              </u-grid-item>
            </u-grid>
          </view>
          <view class="mine-grid">
            <view class="margin-all">掘进进尺</view>
            <u-grid :col="2">
              <u-grid-item>
                <view class="margintb">
                  <text class="primC">{{ psList.drivingYearPlan }}</text>
                  <text class="grayColor"> 米</text>
                </view>
                <view class="grid-text">年计划</view>
              </u-grid-item>
              <u-grid-item>
                <view class="margintb">
                  <text class="primC">{{ psList.drivingMonthPlan }}</text>
                  <text class="grayColor"> 米</text>
                </view>
                <view class="grid-text">月计划</view>
              </u-grid-item>
            </u-grid>
            <u-grid :col="2">
              <u-grid-item>
                <view class="margintb">
                  <text class="errorC">{{ psList.drivingYearComplete }}</text>
                  <text class="grayColor"> 米</text>
                </view>
                <view class="grid-text">年累计完成</view>
              </u-grid-item>
              <u-grid-item>
                <view class="margintb">
                  <text class="errorC">{{ psList.drivingMonthComplete }}</text>
                  <text class="grayColor"> 米</text>
                </view>
                <view class="grid-text">月累计完成</view>
              </u-grid-item>
            </u-grid>
          </view>
        </view>
      </view>
    </scroll-view>

  </view>
</template>

<script>
import searchcom from "../earlyWarning/searchCommon.vue";
export default {
  components: { searchcom },
  data () {
    return {
      yearShow: false,
      mineList: [],
      searchData: {
        customerStr: "",
        customerNo: "",
        customerName: "",
        customerCode: "",
      },
      list: [],
      electricityPlanVo: {},//电煤供应
      engineeringVo: {},//采掘工作面
      current: 0,
      triggered: false,
      year: '',
      psList: {},//生产情况
      yearParams: {
        year: true
      },
    };
  },
  methods: {
    mineConfirm (index) {
      this.searchData.customerStr = this.mineList[index].label
      if (this.mineList[index].label == '所有煤矿') {
        this.searchData.customerName = ''
      } else {
        this.searchData.customerName = this.searchData.customerStr
      }
      this.searchData.customerNo = this.mineList[index].id
      this.searchData.customerCode = this.mineList[index].id
    },
    async getData () {
      let url = '/mobile/excavation/statistics/getElectricityCoalAndCj'
      const { customerCode, customerName } = this.searchData
      let params = {
        customerId: customerCode,
        customerName: customerName,
        month: this.current + 1,
        year: this.year
      }
      const res = await this.$post(url, params)
      if (res.body) {
        let { electricityPlanVo, engineeringVo } = res.body
        this.engineeringVo = engineeringVo
        this.electricityPlanVo = electricityPlanVo
      }
    },
    async getProduceSituation () {
      let url = '/mobile/excavation/statistics/getProduceSituation'
      const { customerCode, customerName } = this.searchData
      let params = {
        customerId: customerCode,
        customerName: customerName,
        month: this.current + 1,
        year: this.year
      }
      const res = await this.$post(url, params)
      if (res.body) {
        this.psList = res.body
      }
    },
    change (index) {
      this.current = index;
      this.getProduceSituation()
    },
    yearConfirm (e) {
      this.year = e.year
      this.getData()
      this.getProduceSituation()
    },
    searchList (e) {
      this.searchData = e
      this.getData()
      this.getProduceSituation()
    },
  },
  onLoad () {
    this.year = new Date().getFullYear()
    for (var i = 1; i <= 12; i++) {
      this.list.push({ name: i + "月" });
    }
    this.current = new Date().getMonth();
    this.getData()
    this.getProduceSituation()
  }
}
</script>

<style lang="scss" scoped>
.year-box {
  padding: 20rpx;
  padding-top: 0px;
}

.mine-detail {
  justify-content: space-between;
}

.fontw {
  font-weight: 700;
}

.margin-all {
  margin: 20rpx;
}

.margintb {
  margin: 20rpx 0;
}

.grayColor {
  margin-left: 10rpx;
  color: #b0b1b4;
}

.title-card {
  font-weight: bold;
  font-size: 30rpx;
  position: relative;
  margin-bottom: 0;
  padding-left: 30rpx;
}

.title-card::after {
  position: absolute;
  content: "";
  left: 0;
  top: -6rpx;
  height: 26rpx;
  width: 4rpx;
  transform: translateY(50%);
  background-color: #043470;
}

.successNum {
  background-color: #fff;
  height: 180rpx;
}

.success-year {
  width: 49%;
  height: 90%;
  display: inline-block;
  padding-left: 15%;
  margin: auto;
  padding-top: 5%;
  border-radius: 16rpx;
}

.work {
  width: 49%;
}

.work-year {
  display: inline-block;
  background-color: #fff;
  width: 46%;
  margin: 3px;
  height: 60%;
  border-radius: 12rpx;
  text-align: center;
  padding-top: 28rpx;
}

.infoC {
  color: #d7a924;
  font-weight: 700;
}

.primC {
  color: #506fff;
  font-weight: 700;
}

.errorC {
  color: #fb718c;
  font-weight: 700;
}

.successC {
  color: #33d7a8;
  font-weight: 700;
}

.mine-input.yearInput {

  /deep/ .uni-input-input {
    margin-left: 35rpx;
  }
}
</style>